<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addCorridor(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addCorridor(viewer) {
      viewer.entities.add({
        name: 'corridor',
        // 与此实体相关联的走廊。 lat lng 就是经度纬度 这个东西
        corridor: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -100.0, 40.0, -105.0, 40.0, -105.0, 35.0, -110.0, 35.0, -110.0, 40.0, -115.0, 45.0, 100, 46.0
          ]),
          width: 100000, //宽度必须设置
          height: 200000, //高度
          extrudedHeight: 200, //拉伸高度
          material: Cesium.Color.RED,
          cornerType: Cesium.CornerType.BEVELED, //拐角样式
          granularity: Cesium.Math.RADIANS_PER_DEGREE, //指定每个纬度和经度之间的距离
          zIndex: 0 //层级，当未定义height和extrudedHeight且道路为静态时才有效
        }
      })

      viewer.entities.add({
        name: 'corridor',
        corridor: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -100.0, 40.0, -105.0, 40.0, -105.0, 35.0, -110.0, 35.0, -110.0, 40.0, -115.0, 40.0, 100, 30
          ]),
          width: 100000, //宽度必须设置
          height: 200000, //高度
          extrudedHeight: 2000, //拉伸高度
          material: Cesium.Color.BLUE,
          cornerType: Cesium.CornerType.BEVELED, //拐角样式
          granularity: Cesium.Math.RADIANS_PER_DEGREE, //指定每个纬度和经度之间的距离
          zIndex: 1 //层级，当未定义height和extrudedHeight且道路为静态时才有效
        }
      })
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
